import React, { useState,useEffect} from 'react';
import { Card, Row, Col, Select, Checkbox, Input, Button, DatePicker } from 'antd';
import type { DatePickerProps } from 'antd';
import { BorderOutlined } from '@ant-design/icons';
import { producestore } from '../stores/Produce';
import { useSnapshot } from 'valtio';
import { state } from "../stores/index"
type RangePickerProps = DatePickerProps['rangePicker'];

type Props = {
    originlist: { value: string; label: string }[];
    outletlist: { value: string; label: string }[];
    flag: boolean;
};

export default function Headers({  flag }: Props) {
    const store = useSnapshot(producestore);
    const index = useSnapshot(state);
    const [OrderID, setOrderID] = useState('');
    const [brand, setBrand] = useState('');
    const [outlet, setOutlet] = useState('');
    const [status, setStatus] = useState<string[]>([]);
    const [time, setTime] = useState<any[]>([]);
    const [origin,setorigin] = useState('');
    const handleSelectChange = (value: string, setState: React.Dispatch<React.SetStateAction<string>>) => {
        setState(value);
    };

    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
        setOrderID(event.target.value);
    };
    useEffect(()=>{
        index.getBrand()
        index.getPartition()
        index.getShop()
    },[])
    const handleCheckboxChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
        if (event.target.checked) {
            setStatus([...status, event.target.value]);
        } else {
            setStatus(status.filter((item) => item !== event.target.value));
        }
    };

    const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
        // No action needed here unless you want to do something with the selected dates.
    };

    const search = () => {
        store.searchlist(origin, time, outlet, status, OrderID);
        store.search();
    };

    
    const reset = () => {
        setOrderID('');
        setBrand('');
        setOutlet('');
        setStatus([]);
        store.reactlist();
        store.search();
    };

    return (

        <Card title="订单筛选" className="w-[90%] mt-5 m-auto min-h-[240px] min-w-[1200px]">

            <div className="flex">
                <div className="w-[90%]">
                    <div className="flex w-[100%]">
                        <div className="flex ml-5">
                            <p>订单时间：</p>
                            <DatePicker.RangePicker
                                showTime={{ format: 'HH:mm' }}
                                format="YYYY-MM-DD HH:mm"
                                style={{ height: 40, width: 300, marginTop: 10 }}
                                onChange={(value, dateString) => {
                                    setTime(dateString);
                                }}
                                onOk={onOk}
                            />
                        </div>
                        <div className="flex ml-5">
                            <p>订单来源：</p>
                            <Select
                                defaultValue="请选择---"
                                value={origin}
                                style={{ width: 120, marginTop: 10 }}
                                onChange={(value) => handleSelectChange(value, setorigin)}
                                options={index.platform}
                            />
                        </div>
                        <div className="flex ml-5">
                            <p>品牌：</p>
                            <Select
                                defaultValue="请选择---"
                                value={brand}
                                style={{ width: 120, marginTop: 10 }}
                                onChange={(value) => handleSelectChange(value, setBrand)}
                                options={index.brands}
                            />
                        </div>
                        <div className="flex ml-5">
                            <p>(配送点)门店：</p>
                            <Select
                                defaultValue="请选择---"
                                value={outlet}
                                style={{ width: 120, marginTop: 10 }}
                                onChange={(value) => handleSelectChange(value, setOutlet)}
                                options={index.shop}
                            />
                        </div>
                    </div>
                    {flag ? null : (
                        <div className="flex ml-5 mt-5">
                            <p>订单状态：</p>
                            <Checkbox.Group
                                style={{ width: '600px', marginTop: 14 }}
                                onChange={(values) => setStatus(values)}
                            >
                                <Row gutter={[16, 16]}>
                                    <Col span={4}>
                                        <Checkbox value="全部">全部</Checkbox>
                                    </Col>
                                    <Col span={4}>
                                        <Checkbox value="已打包">已打包</Checkbox>
                                    </Col>
                                    <Col span={4}>
                                        <Checkbox value="已送出">已送出</Checkbox>
                                    </Col>
                                    <Col span={4}>
                                        <Checkbox value="已送达">已送达</Checkbox>
                                    </Col>
                                    <Col span={4}>
                                        <Checkbox value="已退订">已退订</Checkbox>
                                    </Col>
                                    <Col span={4}>
                                        <Checkbox value="已结算">已结算</Checkbox>
                                    </Col>
                                </Row>
                            </Checkbox.Group>
                        </div>
                    )}
                    <div className="flex ml-5 mt-5">
                        <p>订单号：</p>
                        <Input
                            value={OrderID}
                            onChange={handleChange}
                            className="w-[300px]"
                            placeholder="请输入订单号"
                        />
                    </div>
                </div>
                <div className="w-[10%] flex justify-center items-center">
                    <Button type="primary" onClick={search} className="ml-5">
                        <BorderOutlined />查询
                    </Button>
                    <Button onClick={reset} className="ml-5">
                        重置
                    </Button>
                </div>
            </div>
        </Card>
    );
}